<template>
  <div class="content-list">
    <div class="bg-white pt-3 pl-3 pr-3">
      <div class="display-flex jc-between">
        <div class="video">
          <i class="iconfont icon-shipin primary"></i>
          <span class="font-m pl-2 black-3">英雄介绍视频</span>
        </div>
        <div class="video">
          <i class="iconfont icon-tupian primary"></i>
          <span class="font-m pl-2 black-3">一图识英雄</span>
        </div>
      </div>
      <div class="skill-info mt-4 ">
        <ul class="skill-img display-flex jc-around skills">
          <li v-for="(pic,index) in model.skills" :key="pic._id" :class="{'active':index === currentIndex}" @click="hello(index)">
            <img :src="pic.icon"  alt="" width="60px" height="60px"  >
          </li>
        </ul>
        <ul class="skill-des pb-3" >
          <li v-for="(name,i) in model.skills" :key="name._id">
            <div v-if="i === currentIndex" class="pt-4">
              <div class="display-flex ai-center">
                <span class="font-sl font-weight black-3">{{name.name}}</span>
                <span class="grey pl-5">(冷却值：{{name.delay}} 消耗：{{name.cost}})</span>
              </div>
              <div class="mt-4 black-3 font-m">{{name.description}}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <HeroCard title="加点建议" icon="tuijian" class="mt-3">
      <div class="display-flex jc-between text-center p-2" v-if="model.skills[0]">
        <div class="">
          <div class="font-sl pb-3">主升</div>
          <img :src="model.skills[0].icon" alt="" class="addIcon" >
          <div class="font-xs pt-1">{{model.skills[0].name}}</div>
        </div>
        <div class="">
          <div class="font-sl pb-3">副升</div>
          <img :src="model.skills[2].icon" alt="" class="addIcon">
          <div class="font-xs pt-1">{{model.skills[2].name}}</div>
        </div>
        <div>
          <div class=" pb-3 font-sl">召唤师技能</div>
          <div>
            <ul class="display-flex">
              <li v-for="skill in model.heroSkills" :key="skill._id" class="pl-2">
                <img :src="skill.icon" alt="" class="addIcon">
                <div class="font-xs pt-1">{{skill.name}}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </HeroCard>
    <HeroCard title="出装推荐" icon="tuijian">
      <div class="pb-2 border-b">
        <div class="font-sl black-3 mb-3">顺风出装</div>
        <ul class="display-flex jc-between">
          <li v-for="item in model.items1" :key="item._id">
            <img :src="item.image" alt="" class="adviceIcon">
            <div class="font-xs">{{item.name}}</div>
          </li>
        </ul>
      </div>
      <div class="pb-2 border-b pt-2">
        <div class="font-sl black-3 mb-3">逆风出装</div>
        <ul class="display-flex jc-between">
          <li v-for="item in model.items2" :key="item._id">
            <img :src="item.image" alt="" class="adviceIcon">
            <div class="font-xs">{{item.name}}</div>
          </li>
        </ul>
      </div>
    </HeroCard>
    <HeroCard title="铭文推荐" icon="tuijian" class="mt-3 pb-3">
        <div>
          <ul class="display-flex jc-between">
            <li v-for="item in model.recommend" :key="item._id">
              <div class="display-flex ai-center" >
                <img :src="item.icon" alt="" class="recommendIcon">
                <div class="pl-2">
                  <div class="font-xl">{{item.name}}</div>
                  <div class="font-xs">{{item.description1}}</div>
                  <div class="font-xs">{{item.description2}}</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
    </HeroCard>
    <HeroCard title="使用技巧" icon="tuijian" class="mt-3 pb-3">
      <div class="black-3">
        {{model.usageTips}}
      </div>
    </HeroCard>
    <HeroCard title="对抗技巧" icon="tuijian" class="mt-3 pb-3">
      <div class="black-3 font-m">
        {{model.battleTips}}
      </div>
    </HeroCard>
    <HeroCard title="团战思路" icon="tuijian" class="mt-3 pb-3">
      <div class="black-3 font-m">
        {{model.teamTips}}
      </div>
    </HeroCard>
    <HeroCard title="英雄关系" icon="tuijian" class="mt-3 pb-3">
      <div class="black-3">
        <div class="mb-2 font-sl black-3">最佳搭档</div>
        <ul>
          <li v-for="item in model.partners" :key="item._id" class="display-flex mb-3">
            <img :src="item.hero.avatar" alt="" v-if="item.hero" class="heroIcon">
            <div class="pl-3 font-m">{{item.description}}</div>
          </li>
        </ul>
      </div>
    </HeroCard>

  </div>
</template>

<script>
  import HeroCard from "./HeroCard";
  export default {
    name: "HeroKnow",
    props:{
      id:{require:true}
    },
    components:{
      HeroCard
    },
    data(){
      return {
        model:{
          skills:[],
          partners:[]
        },
        currentIndex:0,
        skill:{}
      }
    },methods:{
      async fetch(){
        const res = await this.$http.get(`heroes/${this.id}`)
        this.model = Object.assign(this.model,res.data)
        console.log(this.model)
      },
      hello(i){
        this.currentIndex = i
        this.isActive = !this.isActive
      }
    },
    created() {
      this.fetch()
    }
  }
</script>

<style lang="scss">

  .content-list{
    .iconfont{
      font-size: 1.667rem;
      font-weight: 700;
    }
    .skill-info{
      .skill-img{
        li {
          border: 3px solid transparent;
        }
        .active{
          border: 3px solid #db9e3f;
          border-radius: 47%;
        }
      }
    }
  }

</style>